<template>
  <div class="brand-container">
    <!-- 显示 -->
    <el-card shadow="always">
      <!-- 第一行，按钮（添加品牌）和搜索框
        如果想实现一行中添加两个组件，就可以使用el-row、el-col
        elementUI将宽度分为24列
       -->
      <el-row :gutter="24">
        <!-- 按钮，添加品牌 -->
        <el-col :span="18">
          <el-button
            type="primary"
            size="small"
            @click="showDialogForm"
          >添加品牌</el-button>
        </el-col>
        <!-- 输入框，搜索表格内容 -->
        <el-col :span="6">
          <el-input
            v-model="input"
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            size="small"
            @keyup.enter.native="getPaginationBrandList"
          />
        </el-col>
      </el-row>

      <!-- 第二行，表格显示品牌信息
        :data="tableData"：数据列表
        prop="date"：对应字段
       -->
      <el-table
        size="small"
        :data="brandList"
        style="width: 100%; margin: 15px 0px"
      >
        <el-table-column
          prop="id"
          label="品牌ID"
          width="100px"
          align="center"
        />
        <el-table-column
          prop="logo"
          label="品牌LOGO"
          align="center"
          width="130px"
        >
          <template slot-scope="{ row }">
            <el-image style="width: 80px; height: 80px" :src="row.logo" />
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="品牌名称"
          width="130px"
          align="center"
        />
        <el-table-column
          prop="company"
          label="公司名称"
          align="center"
          width="120px"
        />
        <el-table-column label="宣传语" align="center" width="180px">
          <template slot-scope="{ row }">
            <el-tag>{{ row.slogan }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="品牌状态" align="center" width="80px">
          <template slot-scope="{ row }">
            <el-tag :type="tagType(row)">{{
              row.flag ? "启用" : "禁用"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <el-tooltip
              class="item"
              effect="dark"
              content="查看所有货物"
              placement="bottom"
            >
              <el-button icon="el-icon-search" circle />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="修改品牌信息"
              placement="bottom"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="modify(row)"
              />
            </el-tooltip>
            <!-- <el-tooltip
              class="item"
              effect="dark"
              content="删除品牌信息"
              placement="bottom"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteBrand(row)"
              />
            </el-tooltip> -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 第三行，分页器
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
       -->
      <el-pagination
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="text-align: center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <!-- 对话框，添加|修改品牌信息 -->
      <BrandAoU
        ref="dialogForm"
        @getPaginationBrandList="getPaginationBrandList"
      />
    </el-card>
  </div>
</template>

<script>
// 导入品牌添加|修改组件
import BrandAoU from '@/views/information/brand/components/BrandAoU.vue'

export default {
  name: 'Brand',
  components: {
    BrandAoU
  },
  data() {
    return {
      // 搜索框数据
      input: '',
      // 当前页码
      currentPage: 1,
      // 每页条数
      pageSizes: [3, 5, 10],
      // 最多页码数
      pageSize: 3,
      // 数据总数
      total: 0,
      // 品牌信息列表
      brandList: []
    }
  },
  mounted() {
    this.getPaginationBrandList()
  },
  methods: {
    // 显示对话框
    showDialogForm() {
      // 调用子组件显示对话框的方法
      this.$refs.dialogForm.dialogFormOn()
    },
    // 获取品牌信息列表
    async getPaginationBrandList() {
      // 异步调用获取品牌信息列表的接口
      const response = await this.$API.brand.getPaginationBrandList(this.currentPage, this.pageSize, this.input)
      if (response.code === 200) {
        // 信息获取成功
        this.brandList = response.data.records
        this.total = response.data.total
      } else {
        // 信息获取失败
        this.$message.error('获取品牌信息列表失败！')
      }
    },
    // 修改每页记录数
    handleSizeChange(val) {
      // 修改data中的每页记录数
      this.pageSize = val
      // 重新加载品牌信息列表
      this.getPaginationBrandList()
    },
    // 修改当前页
    handleCurrentChange(val) {
      // 修改data中的当前页
      this.currentPage = val
      this.getPaginationBrandList()
    },
    // 修改品牌信息
    modify(row) {
      // 调用子组件方法，弹窗并填充数据
      this.$refs.dialogForm.modify(row)
    },
    // 删除品牌信息
    deleteBrand(row) {
      this.$confirm(`此操作将永久删除【${row.name}】品牌相关信息, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用接口，删除品牌信息
        this.$API.brand.deleteBrand(row.id)
        // 弹窗提醒，品牌信息删除成功
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 重新拉取品牌信息
        this.getPaginationBrandList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '删除失败！'
        })
      })
    },
    // 控制tag的type
    tagType(row) {
      if (row.flag === true) {
        return 'success'
      }
      return 'danger'
    }
  }
}
</script>

<style lang='scss' scoped>
.brand {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
